<template>
  <div id="selectCard">
    <header>
      <div class="cd-header">
        <span class="left">快速申请信用卡</span>
        <span class="right">
          您的位置:
          <a href="#">信用卡</a> >
          <a href="#">快速申请信用卡</a>
        </span>
      </div>
    </header>
    <div class="cardList">
      <div class="listItem" v-for="(item, index) in cardList" :key="index">
        <div class="listImg">
          <img :src="item.picUrl" alt="" />
        </div>
        <div @click="getImgUrl(item)">
          <el-radio
            @change="handleRadioChange"
            v-model="checked"
            :label="item.id"
            >{{ item.creditName }}</el-radio
          >
        </div>
      </div>
    </div>
    <div class="nextBtn">
      <el-button type="primary" @click="nextBtn">下一步</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checked: "",
      cardList: [],
      cardListChecked: [],
      cardID: "",
      picUrl: ""
    };
  },
  methods: {
    handleRadioChange(data) {
      window.sa.track("$CollectCreditClick", {
        $element_content: data
      });
      this.cardID = data;
    },
    getImgUrl(data) {
      this.cardID = data.id;
      this.picUrl = data.picUrl;
    },
    nextBtn() {
      if (this.cardID === "") {
        this.$alert(`请选择一张卡面`, "提示", {
          confirmButtonText: "确定"
        });
      } else {
        window.sa.track("$CollecCreditNextClick", {
          $element_content: this.cardID
        });
        let data = {
          cardID: this.cardID,
          picUrl: this.picUrl,
          isHeader: false
        };
        this.$router.push({ name: "orderCardPre", params: data });
      }
    },
    queryCredit(id) {
      let params = {
        keyword: id
      };
      this.$remote("/runtime/poccredit/selectPocCredit.action", params).then(
        res => {
          this.cardList = res.list;
        }
      );
    }
  },
  mounted() {
    this.queryCredit(this.$route.params.id);
  },
  created() {
    window.sa.track("$pageview", {
      $url_path: "selectCard"
    });
  }
};
</script>
<style scoped lang="stylus">
#selectCard {
  flex 1;
  padding 0 20px;
}
.el-button--primary {
  color: #FFF;
  background-color: #06469e;
  border-color: #06469e;
}
.cd-header {
  height 36px;
  line-height 36px;
  display flex;
  justify-content space-between;
  border-bottom 2px solid #08088a;
  position relative;
}
.cardList {
  padding-top 20px;
  width 1000px;
  text-align center;
  margin-bottom 20px;
  display flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
img {
  width 100%;
  height: 100%;
  max-width 100%;
  max-height 100%;
}
.listItem {
  margin-bottom 15px;
}
.listImg {
  margin-bottom 15px;
  width 400px;
  height 250px;
}
.nextBtn {
  text-align center;
  margin-bottom 15px;
}
</style>
